<template>
    <div id="part2">
        <h1>关于深度检测</h1>
        <strong>可以检测到数组元素的变化和对象属性的变化</strong>
        <p>
            <span>数量</span>
            <button @click="count++">加一</button>
            <input type="number" name="count" v-model="count">
            <button @click="count--">减一</button>
        </p>
        <p>
            <span>单价</span>
            <button @click="price++">加一</button>
            <input type="number" name="price" v-model="price">
            <button @click="price--">减一</button>
        </p>
        <p>{{totalNum}}</p>
        <p>总价格{{totalNum.count*totalNum.price}}</p>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "part2",
  components: {},
  data() {
    return {
      count: 0,
      price: 0
    };
  },
  watch:{
      count(num){
          console.log('count',num)
          this.$store.commit("changeCount",num)
      },
      price(num){
          this.$store.commit("changePrice",num)
      }
  },
  computed:{
      ...mapGetters([
      'totalNum',
    ])
  }
};
</script>
<style scoped>
</style>